<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-title" content="斗米兼职">
        <meta name="format-detection"content="telephone=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link rel="apple-touch-icon-precomposed" href="http://sta.ganji.com/att/project/app/parttime_job/doumi/logo_app.png">
        <script src="https://api.map.baidu.com/api?v=2.0&ak=XLwUQbNWQVgZgPoGtu0U9uwT0eGplAgx&s=1" type="text/javascript"></script>
        <title>足迹地图</title>
        <link rel="apple-touch-icon-precomposed" href="http://sta.doumistatic.com/src/image/logo_doumi.png">
        <style type="text/css">
            #view_ready{
                display: none;
            }
        </style>
    </head>
    
    <body ontouchstart="">
        <div class="page footprint" id="view_ready">
            <div class="map" id="map"></div>
            <div class="user-wrap bg-color com-border-top" v-show="isShowDetailFlag == 0">
                <ul class="user-list" v-show="list.length > 0">
                    <li @click="allIconClicked" class="selected" v-if="list.length > 1">
                        <span class="bg_sprite icon_all"></span>
                        <span class="name">全部</span>
                    </li>
                    <li v-for="user in list" :class="{'selected': list.length == 1}" @click="userIconClicked($index)">
                        
                        <div class="avatar-box">
                            <img class="avatar" :src="user.avatar || '/avatar.png'" alt="">
                            <span class="cover" v-if="user.member_status == -1">已离职</span>
                        </div>
                        <span class="name">{{user.name}}</span>
                    </li>
                </ul>
            </div>

            <div class="user-detail bg-color" :class="{'slidedown': isShowDetailFlag == 0,'slideup': isShowDetailFlag == 1}">
                <div class="location com-border-bottom" v-if="detailData.length>0" v-show="isShowDetailFlag == 1">
                    <span class="bg_sprite icon_location"></span>
                    <p>{{detailData[0].form_data[0].value.addr_name}}({{detailData[0].form_data[0].value.addr}})</p>
                    <a href="javascript:;" @click="hideDetailButtonClicked">收起</a>
                </div>
                <ul class="user-list_2" v-show="isShowDetailFlag == 1">
                    <li class="com-border-bottom" v-for="data in detailData">
                        
                        <div class="avatar-box">
                            <img class="avatar" :src="data.avatar || '/avatar.png'" alt="" @click="gotoProjectMemberDetail(data.user_id)">
                            <span class="cover" v-if="data.member_status == -1">已离职</span>
                        </div>
                        <div class="info">
                            <p class="name">{{data.name}}</p>
                            <template v-for="mat in data.form_data">
                                <ul class="pic-list" v-if="mat.type==='Imageview'">
                                    <p style="color: rgb(102, 102, 102);">{{mat.title}}:</p>
                                    <li v-for="url in mat.value.thumb_url" track-by="$index">
                                        <img :src="url" alt="" v-if="$index<2"@click="bigPicturePreview(mat.value.url, $index)">
                                        <div class="mask" v-if="$index==1" @click="bigPicturePreview(mat.value.url, $index)"><span></span><span></span><span></span></div>
                                    </li>
                                </ul>
                                <template v-else>
                                    <p class="remark" v-if="mat.type!='Location'"><em>{{mat.title}}:</em>{{mat.value}}</p>
                                </template>
                            </template>
                            
                            
                            <span class="time">{{getLocalTime(data.sign_time*1000)}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </body>    

    <style type="text/css">
        div.footprint .user-wrap, .footprint .user-detail{
            overflow: auto;
        }
        div.user-detail .pic-list li{
            margin-bottom: 8px;
        }
        div.user-detail .location p{
            margin: 0 0 0 8px;
        }
        .slidedown{
            -webkit-animation: slidedown .5s ease forwards;
        }
        .slideup{
            -webkit-animation: slideup .5s ease forwards;
        }
        @-webkit-keyframes slidedown{
            from {
                max-height: 50%
            }
            to {
                max-height: 0;
            }
        }
        @-webkit-keyframes slideup{
            from {
                max-height: 0;
            }
            to {
                max-height: 50%;
            }
        }
        div.mar_top{
            margin-top: 13px;
        }
        #view_ready{
            display: block;
        }
        ul.user-list{
            /*height:74px;*/
        }
        ul.user-list_2{
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        // console.log(this.list)
        // $('.user-list').height(this.list.length * 70 + 70)
        $('.user-list_2').css({
            'max-height': $(document).height()/2 - 54 + 'px'
        })
    </script>
</html>
